<template>
  <view class="announcement-detail">


    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <u-loading-icon mode="spinner" size="60"></u-loading-icon>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 公告内容 -->
    <view v-else-if="announcement" class="announcement-content">
      <!-- 公告头部 -->
      <view class="announcement-header">
        <view class="announcement-title">{{ announcement.title }}</view>
        <view class="announcement-meta">
          <view class="meta-item">
            <u-icon name="clock" size="18" color="#999"></u-icon>
            <text class="meta-text">{{ announcement.publish_time }}</text>
          </view>
          
        </view>
        <view v-if="announcement.type" class="announcement-type">
          <text class="type-tag" :class="typeClass">
            {{ announcement.type_text || typeName }}
          </text>
        </view>
      </view>

      <!-- 公告图片 -->
      <view v-if="announcement.image_url" class="announcement-image">
        <image 
          :src="announcement.image_url" 
          mode="widthFix" 
          class="content-image"
          @click="previewImage"
        ></image>
      </view>

      <!-- 公告正文 -->
      <view class="announcement-body">
        <rich-text :nodes="announcement.content" class="rich-content"></rich-text>
      </view>
  </view>
  </view>
</template>

<script>
/**
 * 公告详情页
 * @author 王勇程 <laughskydragon@qq.com>
 */
import { announcementApi } from '@/api'

export default {
  data() {
    return {
      loading: true,
      announcement: null,
      announcementId: null
    }
  },
  computed: {
    typeName() {
      const t = this.announcement?.type
      const key = String(t || '')
      const map = {
        system: '系统公告',
        common: '普通公告',
        notice: '通知公告',
        activity: '活动公告',
        maintenance: '维护公告',
        update: '更新公告',
        '1': '系统公告',
        '2': '活动公告',
        '3': '维护公告'
      }
      return map[key] || '公告'
    },
    typeClass() {
      const t = this.announcement?.type
      const key = String(t || '')
      const map = {
        system: 'type-system',
        common: 'type-common',
        notice: 'type-notice',
        activity: 'type-activity',
        maintenance: 'type-maintenance',
        update: 'type-update',
        '1': 'type-system',
        '2': 'type-activity',
        '3': 'type-maintenance'
      }
      return map[key] || 'type-default'
    }
  },

  onLoad(options) {
    this.announcementId = options.id
    if (this.announcementId) {
      this.loadAnnouncementDetail()
    } else {
      this.loading = false
    }
  },

  onShow() {
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: '公告详情'
    })
  },

  methods: {
    // 加载公告详情
    async loadAnnouncementDetail() {
      try {
        this.loading = true
        const res = await announcementApi.getAnnouncementInfo({
          id: this.announcementId
        })
        
        this.announcement = res
        uni.setNavigationBarTitle({
          title: this.announcement.title || '公告详情'
        })
        this.markAsRead()
      } catch (error) {
        console.error('加载公告详情失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    // 标记公告为已读
    async markAsRead() {
      try {
        await announcementApi.markAnnouncementRead({
          id: this.announcementId
        })
      } catch (error) {
        console.error('标记已读失败:', error)
      }
    },

    // 格式化时间
    formatTime(time) {
      if (!time) return ''
      const date = new Date(time)
      const now = new Date()
      const diff = now - date
      
      if (diff < 60000) { // 1分钟内
        return '刚刚'
      } else if (diff < 3600000) { // 1小时内
        return Math.floor(diff / 60000) + '分钟前'
      } else if (diff < 86400000) { // 1天内
        return Math.floor(diff / 3600000) + '小时前'
      } else {
        return date.toLocaleDateString()
      }
    },

    // 获取类型名称
    getTypeName(type) {
      const key = String(type)
      const typeMap = {
        'system': '系统公告',
        'common': '普通公告',
        'notice': '通知公告',
        'activity': '活动公告',
        'maintenance': '维护公告',
        'update': '更新公告',
        '1': '系统公告',
        '2': '活动公告',
        '3': '维护公告'
      }
      return typeMap[key] || '公告'
    },

    // 获取类型样式类
    getTypeClass(type) {
      const key = String(type)
      const classMap = {
        'system': 'type-system',
        'common': 'type-common',
        'notice': 'type-notice',
        'activity': 'type-activity',
        'maintenance': 'type-maintenance',
        'update': 'type-update',
        '1': 'type-system',
        '2': 'type-activity',
        '3': 'type-maintenance'
      }
      return classMap[key] || 'type-default'
    },

    // 预览图片
    previewImage() {
      if (this.announcement && this.announcement.image_url) {
        uni.previewImage({
          urls: [this.announcement.image_url],
          current: 0
        })
      }
    },

    // 分享公告
    shareAnnouncement() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 0,
        href: '',
        title: this.announcement.title,
        summary: this.announcement.content.replace(/<[^>]+>/g, '').substring(0, 100),
        imageUrl: this.announcement.image_url || '',
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          })
        },
        fail: () => {
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          })
        }
      })
    },



    // 跳转到公告列表
    goToList() {
      uni.navigateTo({
        url: '/pages/announcement/list'
      })
    },

    // 获取类型样式类
    getTypeClass(type) {
      const classMap = {
        1: 'type-system',
        2: 'type-activity',
        3: 'type-maintenance'
      }
      return classMap[type] || 'type-default'
    }
  }
}
</script>

<style scoped>
.announcement-detail {
  min-height: 100vh;
  background: #f5f5f5;
}



/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

/* 公告内容 */
.announcement-content {
  padding: 30rpx;
}

.announcement-header {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.announcement-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 20rpx;
}

.announcement-meta {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-right: 40rpx;
}

.meta-text {
  font-size: 24rpx;
  color: #999;
  margin-left: 8rpx;
}

.announcement-type {
  display: flex;
  align-items: center;
}

.type-tag {
  font-size: 22rpx;
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.type-system {
  background: #ff4444;
}

.type-activity {
  background: #ff8800;
}

.type-maintenance {
  background: #666;
}

.type-notice {
  background: #4a90e2;
}

.type-common {
  background: #7b8a8b;
}

.type-update {
  background: #2ecc71;
}

.type-default {
  background: #999;
}

/* 公告图片 */
.announcement-image {
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.content-image {
  width: 100%;
  border-radius: 12rpx;
}

/* 公告正文 */
.announcement-body {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.rich-content {
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.action-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10rpx;
}

.share-btn {
  background: linear-gradient(135deg, #ff4444 0%, #ff6666 100%);
}

.back-btn {
  background: linear-gradient(135deg, #666 0%, #888 100%);
}

.btn-text {
  font-size: 28rpx;
  color: #fff;
  margin-left: 10rpx;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 60rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin: 40rpx 0;
}

.empty-btn {
  background: #ff4444;
  border-radius: 40rpx;
  padding: 20rpx 40rpx;
}

.empty-btn-text {
  font-size: 28rpx;
  color: #fff;
}
</style>
